<template>
  <a-row>
    <a-col :span='24' v-show='isCouCourseArrangeConflictDetectionCompShow'>
      <a-card :bordered='false' style='margin-top: -20px;'>
        <!-- table区域-begin -->
        <div class='table-page-search-wrapper'>
          <a-form layout='inline' @keyup.enter.native='searchQuery'>
            <a-row :gutter='24'>
              <a-col :md='6' :sm='5'>
                <a-form-model-item>
                  <div style='text-align: right;height:15px;color: #d40505;'> * 红色区域，表示冲突型公共有课部分</div>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div id='modal-body-print2'>
          <!--      <div style='text-align: center;color: #4b4b4b;font-size: 20px;padding-bottom:10px;font-weight: bold;'>{{ classname }}</div>-->
          <div style='float:left;text-align: center;background: #f5f5f5;border: 1px solid #e2e2e2;'>
            <div style='width: 110px;float: left;'>
              <div class='week-t'><span>节次</span></div>
              <div class='week-c' style='font-size: 14px;background-color: #fafafa;' v-for='item in courseData1'
                   :key='item' slot='item'>
                <div>{{ item.courArraAtomSectionname }}</div>
                <div>( {{ item.courArraAtomStartTime }}-{{ item.courArraAtomEndTime }} )</div>
              </div>
            </div>

            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期一</span></div>
              <div v-for='item in courseData1' :key='item' slot='item' @click='selectBt()'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期二</span></div>
              <div v-for='item in courseData2' :key='item' slot='item'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期三</span></div>
              <div v-for='item in courseData3' :key='item' slot='item'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期四</span></div>
              <div v-for='item in courseData4' :key='item' slot='item'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期五</span></div>
              <div v-for='item in courseData5' :key='item' slot='item'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期六</span></div>
              <div v-for='item in courseData6' :key='item' slot='item'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
            <div style='width: 200px;float: left;'>
              <div class='week-t'><span>星期天</span></div>
              <div v-for='item in courseData7' :key='item' slot='item'>
                <div class='week-c' :style="{'background':item.arrangeContradictionColor}">
                  <div>{{ item.subjectName }}</div>
                  <div>{{ item.teacherName }}</div>
                  <div>{{ item.classroomNickname }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import html2canvas from 'html2canvas'
import { deleteAction, getAction, putAction } from '@api/manage'
import { getTeacherCourseDataList } from '@api/couCourseArrangeAtom'

export default {
  // 课程表冲突检测
  name: 'CouCourseArrangeConflictDetectionComp',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  props: {
    isCouCourseArrangeConflictDetectionCompShow: false,
    teacherId: {
      type: String,
      default: ''
    }
  },
  watch: {
    teacherId: {
      immediate: true,
      handler() {
        if(this.teacherId){
          this.queryParam.teacherId = this.teacherId
          this.handleGetData(1)
          console.log('teacherId 发生变化了我重新执行了冲突检测')
        }
      }
    }
  },
  data() {
    return {
      description: 'v_cou_course_arrange_atom管理页面',
      url: {
        //下拉教师(通过班级id查看已分配的教师)
        selectTeacherListByClassId: '/teacher/teaTeacher/teacherListByClassId',
        //冲突检测课表
        list: '/coursearrangeatom/couCourseArrangeAtom/list'
      },
      //ref部分
      objectModel: {
        targetObjId: null
      },
      //查询方式
      selectType: '1',
      queryParam: {
        teacherId: '',
        classId: ''
      },
      dataSource: [],
      classname: '',
      //下拉教师
      selectTeacherList: [],
      //课表科目查询
      courseData1: [],
      courseData2: [],
      courseData3: [],
      courseData4: [],
      courseData5: [],
      courseData6: [],
      courseData7: [],
      //选中字段
      handleEditCourseId: null,
      handleEditCourseRelObjId: null,
      disableMixinCreated: true,
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  mounted() {
    this.clearValue()
  },
  methods: {
    clearValue() {
      this.teacherId = ''
    },
    initDictConfig() {
    },
    //冲突检测数据
    handleGetData(checkContradiction) {
      //初始化
      this.courseData1 = [],
        this.courseData2 = [],
        this.courseData3 = [],
        this.courseData4 = [],
        this.courseData5 = [],
        this.courseData6 = [],
        this.courseData7 = [],
        this.getCourseData(checkContradiction)
    },
    //ttype类型 教师 没有无影响（废除时将前后端都要废除）
    async getCourseData(checkContradiction) {
      var params
      if (this.queryParam.teacherId != null && this.queryParam.teacherId != '') {
        params = {
          courseArrangeId: null,
          teacherId: this.queryParam.teacherId,
          checkContradiction: checkContradiction
        }
      } else {
        params = {
          courseArrangeId: this.objectModel.id,
          checkContradiction: checkContradiction
        }
      }
      console.log('重新执行了冲突检测')
      let res = await getTeacherCourseDataList(params)
      if (res && res.code === 200) {
        let datas = res.result
        this.courseData1 = datas.filter((item) => {
          return item.courArraAtomWeekday === 1
        })
        this.courseData2 = datas.filter((item) => {
          return item.courArraAtomWeekday === 2
        })
        this.courseData3 = datas.filter((item) => {
          return item.courArraAtomWeekday === 3
        })
        this.courseData4 = datas.filter((item) => {
          return item.courArraAtomWeekday === 4
        })
        this.courseData5 = datas.filter((item) => {
          return item.courArraAtomWeekday === 5
        })
        this.courseData6 = datas.filter((item) => {
          return item.courArraAtomWeekday === 6
        })
        this.courseData7 = datas.filter((item) => {
          return item.courArraAtomWeekday === 7
        })
      } else {
        this.$message.error('暂无数据')
      }
    },
    //重置冲突检测参数
    initQueryParam() {
      this.queryParam = {}
    }


  }
}
</script>

<style scoped>
.week-t {
  background-color: #fafafa;
  height: 40px;

  color: #151515;
  line-height: 40px;
  font-weight: bold;
}

.week-c {
  height: 65px;
  border-top: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
  line-height: 17px;
  font-size: 12px;
}

.week-c:hover {
  background-color: #e2e1e1;
  transition: all 0.5s;
}

.select-box {
  z-index: 9999;
  font-size: 18px;
  color: #ffffff;
  border-radius: 50px;
  padding: 5px;
  display: flex;
  position: absolute;
  background: #09ad4b;
  width: 27px;
  height: 27px;
}

@import '~@assets/less/common.less';
</style>